<template>
  <div class="datain_main_box">
    <p class="_main_box_title">{{ title }}</p>
  </div>
  <el-form label-width="120px">
    <el-form-item label="评分标准：">
      <table style="text-align: center;">
        <tr>
          <th style="width:200px">评价指标</th>
          <th style="width:200px">3分</th>
          <th style="width:200px">5分</th>
          <th style="width:200px">8分</th>
          <th style="width:200px">10分</th>
        </tr>
        <tbody>
          <tr v-for="(item) in tableList" :key="item.apiFieldInfold">
            <td>{{ item.remark }}</td>
            <template v-if="item.dataSetType == 1">
              <td v-for=" index in 4" :key="index">
                <div>
                  <el-input type="text" v-model="item.column[index - 1].value" readonly />
                  <span v-if="index == 1">
                    ≥ x ≥
                  </span>
                  <span v-else>
                    &gt; x ≥ </span>
                  <el-input type="text" v-model="item.column[index].value" readonly />
                </div>
              </td>
            </template>
            <template v-if="item.dataSetType == 2">
              <td v-for=" index in 4" :key="index">
                <el-input type="text" v-model="item.column[index - 1].value" readonly />
                <span v-if="index == 1">
                  ≤ x ≤
                </span>
                <span v-else>
                  &lt; x ≤ </span>
                <el-input type="text" v-model="item.column[index].value" readonly />
              </td>
            </template>
            <template v-if="item.dataSetType == 3">
              <td v-for=" index in 4" :key="index">
                {{ item.column[index - 1].value }}
                <!-- <el-input type="text" v-model="item.column[index - 1].value" readonly style="width: 60% !important" /> -->
                <!-- <MySelect v-model="item.column[index - 1].value" :item="item"
                  @onHandleCanSelectUnique="onHandleCanSelectUnique" @handleDisabledUnique="handleDisabledUnique" /> -->
              </td>
            </template>
            <template v-if="item.dataSetType == 4">
              <td v-for=" index in 4" :key="index">
                {{ item.column[index - 1].value }}
                <!-- <el-input type="text" v-model="item.column[index - 1].value" readonly style="width: 60% !important" /> -->
                <!-- <MulSelect v-model="item.column[index - 1].value" :item="item" @handleDisabled="handleDisabled"
                  @onHandleCanSelect="handleCanSelect" /> -->
              </td>
            </template>
          </tr>
        </tbody>
      </table>
    </el-form-item>
    <el-form-item label="指标权重：" prop="indicatorWeight" :rules="indicatorWeightRules">
      <div v-for="(item) in tableList" :key="item.apiFieldInfold"
        style="display:flex;margin-bottom:20px;margin-left:40px;">
        <div style="margin-right:5px">{{ item.remark }}:</div>
        <el-input-number type="number" v-model="item.indicatorWeight" :min="0" :max="100" readonly></el-input-number>%
      </div>

    </el-form-item>
  </el-form>
</template>
<script lang="ts" setup>
import { ref, watch, onDeactivated, onMounted, nextTick } from "vue"
import MulSelect from './mulSelect.vue';
import MySelect from './select.vue'
const props = defineProps({
  detailData: {
    type: Object,
    default: [{
      value: "",
      label: ""
    }]
  },
  title: {
    type: String,
    default: "模型名称"
  },
})

const selectedItems = ref() //存放xuanzhongid
const tableList = ref([]) //存放已选的选项数据放进table

onMounted(() => {
  console.log(props.detailData)
  props.detailData.forEach(item => {
    console.log(item.evaluationCriterionList.filter(a => a.evaluationCriterion == 3));

    const data = {
      remark: item.remark,
      dataField: item.dataField,
      indicatorWeight: item.indicatorWeight,
      dataSetType: item.dataSetType
    };
    if (item.dataSetType == 1 || item.dataSetType == 2) {
      data.column = [
        {
          id: item.dataField + 'input1',
          value: item.evaluationCriterionList.filter(a => a.evaluationCriterion == 3)[0].leftNumericalValue,
        },
        {
          id: item.dataField + 'input2',
          value: item.evaluationCriterionList.filter(a => a.evaluationCriterion == 3)[0].rightNumericalValue,
        },
        {
          id: item.dataField + 'input3',
          value: item.evaluationCriterionList.filter(a => a.evaluationCriterion == 5)[0].rightNumericalValue,

        },
        {
          id: item.dataField + 'input4',
          value: item.evaluationCriterionList.filter(a => a.evaluationCriterion == 8)[0].rightNumericalValue,

        },
        {
          id: item.dataField + 'input5',
          value: item.evaluationCriterionList.filter(a => a.evaluationCriterion == 10)[0].rightNumericalValue,

        },
      ];
    } else {
      data.column = [
        {
          id: item.dataField + 'select1',
          value: item.evaluationCriterionList.filter(a => a.evaluationCriterion == 3)[0].textTypeValue
        },
        {
          id: item.dataField + 'select2',
          value: item.evaluationCriterionList.filter(a => a.evaluationCriterion == 5)[0].textTypeValue
        },
        {
          id: item.dataField + 'select3',
          value: item.evaluationCriterionList.filter(a => a.evaluationCriterion == 8)[0].textTypeValue
        },
        {
          id: item.dataField + 'select4',
          value: item.evaluationCriterionList.filter(a => a.evaluationCriterion == 10)[0].textTypeValue
        },
      ];
    }
    tableList.value.push(data);
  })

})
</script>

<style scoped lang="scss">
custom-input {
  :deep(.el-input__inner) {
    border: none;
  }
}

.el-input {
  width: 30%;
}

.datain_main_box {
  ._main_box_title {
    width: 100%;
    line-height: 36px;
    height: 36px;
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    padding-left: 10px;
    border-left: 3px solid #2b65a7;
    background-color: #efefee;
    margin: 10px 0;
  }
}


table,
th,
td {
  border: 1px solid #bab9b9;
  border-collapse: collapse;
}
</style>
